
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.container{
				width: 600px;
				height: 600px;
				border: solid 1px #969696;
				
				
				
			}
			/* 选项卡 */
			.tabs_wrapper{
				
			}
			ul{
				font-size: 0;
			}
			.tabs_wrapper li{
				font-size: 20px;
				display: inline-block;
				height: 30px;
				line-height: 30px;
				padding: 5px 10px;
				border: solid 1px #666;
				cursor: pointer;
			}
			
			.tabs_wrapper li.active{
				color: #409EFF;
				border-bottom: none;
				
			}
			
			/* 内容 */
			.content_wrapper{
				position: relative;
			}
			.content_item{
				height: 570px ;
				width: 100%;
				border: solid 1px red;
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			.active{
				display: block;
			}
			
		</style>
		
		<script>
			let lssss = document.getElementsByTagName("li");
			// lssss.forEach(function( item,index){
			// 	item.addEventListener("click",function(){
			// 		console.log(this.innerHTML);
			// 	})
			// })
			
			function changeCurrent(li){
				//改变自身的class属性，
				
				let index = -1;
				
				//同样索引位置，内容div上也需要加上active
				// let ul = document.getElementById("tab_title");
				// ul.getElementsByTagName("")
				
				let lis = document.getElementsByTagName("li");
				let contentItem = document.getElementsByClassName("content_item");
				for (var i = 0; i < lis.length; i++) {
					
					//清空active
					lis[i].className = '';
					contentItem[i].className = 'content_item';
					
					if(lis[i] == li){
						index = i;
						
					}
				}
				
				
				//让激活的元素有效
				li.className = 'active'

				contentItem[index].className = "content_item active";
			
				
			}
			
		</script>
		
		
	</head>
	<body>
		
		<div class="container">
			<div class="tabs_wrapper" id="">
				<ul id="tab_title">
					<li onclick="changeCurrent(this)" class="">用户管理</li>
					<li onclick="changeCurrent(this)" >配置管理</li>
					<li onclick="changeCurrent(this)"  class="active">角色管理</li>
					<li onclick="changeCurrent(this)">定时任务补偿</li>
				</ul>
				
				
			</div>
			<div class="content_wrapper">
				<div class="content_item active">1</div>
				<div class="content_item ">2</div>
				<div class="content_item">3</div>
				<div class="content_item">4</div>
				
				
				
				
			</div>
			
			
		</div>
		
		
		
		
		
		
		
		
		
	</body>
</html>